<!-- <template>
  <div>
    <el-dialog title="状态日志表添加页面" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设备Id" :label-width="formLabelWidth" prop="deviceId">
          <el-input v-model="ruleForm.deviceId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" :label-width="formLabelWidth" prop="equipmentNum">
          <el-input v-model="ruleForm.equipmentNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="继电器" :label-width="formLabelWidth" prop="relays">
          <el-input v-model="ruleForm.relays" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="灯状态" :label-width="formLabelWidth" prop="lightStatus">
          <el-input v-model="ruleForm.lightStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="在线" :label-width="formLabelWidth" prop="online">
          <el-input v-model="ruleForm.online" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="信号" :label-width="formLabelWidth" prop="signal">
          <el-input v-model="ruleForm.signal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备温度" :label-width="formLabelWidth" prop="deviceTemperature">
          <el-input v-model="ruleForm.deviceTemperature" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="湿度" :label-width="formLabelWidth" prop="humidity">
          <el-input v-model="ruleForm.humidity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序Id" :label-width="formLabelWidth" prop="sortId">
          <el-input v-model="ruleForm.sortId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker v-model="ruleForm.createTime" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </el-dialog>
    <template>
      <el-form :inline="true" class="demo-form-inline" style="text-align: left" :model="ruleFormData">
        <el-form-item label="设备编号：">
          <el-input v-model="ruleFormData.equipmentNum" placeholder="输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="灯状态">
          <template>
            <el-select v-model="ruleFormData.lightStatus" placeholder="请选择灯状态">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="在线状态">
          <template>
            <el-select v-model="ruleFormData.online" placeholder="请选择在线状态">
              <el-option v-for="item in optiondata" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="ruleFormData.createTime" align="right" type="date" placeholder="选择日期"
             style="width: 235px;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button type="info">重置</el-button>
          <!-- <el-button type="success" @click="dialogVisible = true">添加</el-button>
          <el-button type="success">批量删除</el-button> -->
        <!-- </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="deviceId" label="设备ID" width="180">
        </el-table-column>
        <el-table-column prop="equipmentNum" label="设备编号" width="180">
        </el-table-column>
        <el-table-column prop="relays" label="继电器" width="180">
        </el-table-column>
        <el-table-column prop="lightStatus" label="灯状态" width="180">
        </el-table-column>
        <el-table-column prop="online" label="在线" width="180">
        </el-table-column>
        <el-table-column prop="signal" label="信号" width="180">
        </el-table-column>
        <el-table-column prop="deviceTemperature" label="设备温度" width="180">
        </el-table-column>
        <el-table-column prop="closingTime" label="空气温度" width="180">
        </el-table-column>
        <el-table-column prop="openingTime" label="彩灯亮度" width="180">
        </el-table-column>
        <el-table-column prop="closingTime" label="红色" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="绿色" width="180">
        </el-table-column>
        <el-table-column prop="openingTime" label="蓝色" width="180">
        </el-table-column>
        <el-table-column prop="humidity" label="湿度" width="180">
        </el-table-column>
        <el-table-column prop="sortId" label="排序Id" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
      </el-table>
    </template>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="ruleFormData.pageIndex" :page-sizes="[2, 4, 6, 8]" :page-size="ruleFormData.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>
  </div>
</template>
  
<script>
import { getStatusLogsapi, addStatusLogsData, GetStatusLogsPage, GetCount } from "@/api/iotInfo/StatusLogs";
export default {
  data() {
    return {
      options:[{
          value: 0,
          label: 0
        }, {
          value: 1,
          label: 1,
        }, 
      ],
      optiondata:[{
        value: 0,
        label: 0
      }, {
        value: 1,
        label: 1,
      }, 
    ],
      //默认关闭弹出框
      dialogVisible: false,
      ruleForm: {
        deviceId: null,
        equipmentNum: null,
        relays: null,
        lightStatus: null,
        online: null,
        signal: null,
        deviceTemperature: null,
        humidity: null,
        sortId: null,
        createTime: null,
      },
      //规则验证
      rules: {
        deviceId: [{ required: true, message: '设备Id不能为空', trigger: 'blur' },
        { max: 30, message: '最大长度为30字符', trigger: 'blur' }],
        equipmentNum: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
        relays: [{ required: true, message: '继电器不能为空', trigger: 'blur' }],
        lightStatus: [{ required: true, message: '灯状态不能为空', trigger: 'blur' }],
        online: [{ required: true, message: '在线不能为空', trigger: 'blur' }],
        signal: [{ required: true, message: '信号不能为空', trigger: 'blur' }],
        deviceTemperature: [{ required: true, message: '设备温度不能为空', trigger: 'blur' }],
        humidity: [{ required: true, message: '湿度不能为空', trigger: 'blur' },
        { max: 30, message: '最大长度为30字符', trigger: 'blur' }],
        sortId: [{ required: true, message: '排序Id不能为空', trigger: 'blur' }],
        createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
      },
      //显示的数据
      tableData: [],
      multipleSelection: [],
      from: {

      },
      //添加的数据
      ruleForm: {},
      //查询的数据
      ruleFormData: {
        pageIndex: 1,
        pageSize: 6,
        equipmentNum: "",
        lightStatus:null,
        online:null,
        createTime: "",
      },
      count: 0,
      countnum: 0,
    };
  },
  created() {
    this.getStatusLogsapi();
    this.totalcount();
  },
  methods: {
    //获取总条数方法
    totalcount() {
      GetCount().then((res) => {
        this.countnum = res.data;
      });
    },
    //弹出框关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    totalcount() {
      GetTotaocount().then((res) => {
        this.countnum = res.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.ruleFormData.pageSize = val;
      this.ListData();
    },
    handleCurrentChange(val) {
      this.ruleFormData.pageIndex = val;
      this.ListData();
    },
    //显示方法
    ListData() {
      GetStatusLogsPage(this.ruleFormData).then(res => {
        this.tableData = res.data.data;
        this.count = res.data.totalCount;
        alert(res.data.data,this.tableData,this.count);
        console.log(res.data.data,this.tableData , this.count );
      })
    },
    //查询验证
    searchData() {
      if (this.ruleFormData.equipmentNum == "" && this.ruleFormData.createTime == "") {
        this.$message({
          message: '请输入查询数据',
          type: 'error'
        });
        return;

      }
      this.ListData();
    },
    //添加方法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addStatusLogsData(this.ruleForm).then(res => {
            if (res.data) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              return this.dialogVisible = false;
            } else {
              this.$message({
                message: '添加失败，数据格式可能有误',
                type: 'error'
              });
            }
            return;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script> --> -->